<template>
	<view class="wrap">
		<u-navbar title-color="#fff" back-icon-color="#ffffff"
				   :is-fixed="true" :is-back="true"
				  :background="background"
				  :back-text-style="{color: '#fff'}" :title="title"
				  :back-icon-name="backIconName" :back-text="backText"
		>
			<view class="slot-wrap" v-if="useSlot">
				<view class="search-wrap" v-if="search">
					<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 -->
					<u-search v-model="keyword"
							  :maxlength="32"
							  placeholder="输入搜索"
							  @blur="searchProduct"
							  :show-action="showAction" height="56"
							  :action-style="{color: '#fff'}"></u-search>
				</view>
			</view>
		</u-navbar>
		<u-waterfall v-model="productList" ref="uWaterfall">
			<template v-slot:left="{ leftList }">
				<view class="demo-warter" v-for="(item, index) in leftList" :key="leftId" >
					<view @click="goProductDetail(leftList[index])">
					<!-- 微信小程序需要hx2.8.11版本才支持在template中引入其他组件，比如下方的u-lazy-load组件 -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.productLogoPath[0].url" ></u-lazy-load>
					<view class="demo-title">{{ item.productName }}</view>
					<view class="demo-price">{{ item.productSalsePrice  }}</view>
					<view class="demo-tag">
						<!--<view >自营</view>-->
						<!--<view >放心购</view>-->
						<view v-for="(item, i) in item.productDisplayParam" :class="{ 'demo-tag-owner': i==0, 'demo-tag-text': i==1,'demo-tag-thrid':i==2 }">
							{{item.value}}
						</view>
					</view>
					<view class="demo-shop">{{ item.shopNames }}</view>
					<view class="demo-shop " style="text-align: right"><u-button type="error" size="mini" shape="circle" @click="submitBuyIdea(item.productId)">提交购买意向</u-button></view>
					<!--<view class="u-close"><u-icon name="close-circle-fill" color="#fa3534" size="34" @click="remove(item.id)"></u-icon></view>-->
						<view class="u-close"><u-icon name="close-circle-fill" color="#fa3534" size="34" ></u-icon></view>
					</view>
				</view>
				
			</template>
			<template v-slot:right="{ rightList }">
				<view class="demo-warter" v-for="(item, index) in rightList" :key="rightId" >
					<view @click="goProductDetail(rightList[index])">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.productLogoPath[0].url" :index="index"></u-lazy-load>
					<view class="demo-title">{{ item.productName }}</view>
					<view class="demo-price">{{ item.productSalsePrice  }}</view>
					<view class="demo-tag">
						<view v-for="(item, i) in item.productDisplayParam" :class="{ 'demo-tag-owner': i==0, 'demo-tag-text': i==1,'demo-tag-thrid':i==2 }">
							{{item.value}}
						</view>
					</view>
					<view class="demo-shop">{{ item.shopNames }}</view>
					<view class="demo-shop " style="text-align: right"><u-button type="error" size="mini" shape="circle" @click="submitBuyIdea(item.productId)">提交购买意向</u-button></view>
					<view class="u-close"><u-icon name="close-circle-fill" color="#fa3534" size="34" ></u-icon></view>
					</view>
				</view>
			</template>
		</u-waterfall>
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
		<u-toast ref="uToast" />
		<!--返回顶部-->
		<u-back-top
			:scrollTop="scrollTop"
			:mode="mode"
			:bottom="bottom"
			:right="right"
			:top="top"
			:icon="icon"
			:custom-style="customStyle"
			:icon-style="iconStyle"
			:tips="tips"
		></u-back-top>
		<!--提交意向-->
		<u-popup  v-model="popupShow" mode="center" height="160px" closeable>
			<view style="margin-top: 30px;">
				<u-field
						v-model="userName"
						label="姓名"
						maxlength="32"
						required
						:error-message="errorNameMessage"
						placeholder="请填写姓名"
				>
				</u-field>
				<u-field
						v-model="userPhone"
						label="手机号"
						required
						maxlength="16"
						:error-message="errorMessage"
						placeholder="请填写手机号"
				>
				</u-field>
			</view>
			<view class="u-m-t-12" style="text-align: center">
				<u-button type="error" ripple="true" shape="circle" size="medium" @click="saveTsOrderPurpose" throttle-time="1000">提交意向</u-button>
			</view>

		</u-popup>
	</view>

</template>

<script>
import navbar from 'pages/shops/navbar/index';
import backtop from 'pages/shops/backTop/index.vue';
export default {
	components: {
		'i-navbar': navbar,
		'i-backtop': backtop
	},
	data() {
		return {
            productId:'',
		    /**.手机号*/
            userPhone:'',
            errorMessage:'',
            userName:'',
            errorNameMessage:'',
            popupShow:false,
            title: '',
            backText: '',
            backIconName: 'nav-back',
            showAction: true,
            rightSlot: false,
            useSlot: true,

            isBack: true,
            search: true,
            custom: false,
            isFixed: true,
            keyword: '',
			/***回到顶部*/
			categoryId: null,
			pageInfo: {
				pageNum: 1,
				pageSize: 10
			},
			productList: [],
			scrollTop: 0,
			mode: 'circle',
			bottom: 200,
			right: 20,
			top: 400,
			icon: 'arrow-upward',
			iconStyle: {
				color: '#f29100',
				fontSize: '34rpx'
			},
			customStyle: {
				color: '#f29100'
			},
			tips: '返回',
			/***回到顶部*/
			background: {
				//backgroundColor: '#19be6b',
				// 导航栏背景图
				//background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
				// 还可以设置背景图size属性
				// backgroundSize: 'cover',

				// 渐变色
				backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
			},
			loadStatus: 'loadmore',
			flowList: [],
			list: []
		};
	},
	computed: {},
	onLoad(options) {
		this.categoryId = options.categoryId;
		console.log(options);
		console.log(this.categoryId);
		// this.selectTsProductForList();
		this.queryTsProductForPage()
		// this.addRandomData();
	},
	onReachBottom() {
		this.loadStatus = 'loading';
		// this.selectTsProductForList();
		this.queryTsProductForPage();
		// 模拟数据加载
		setTimeout(() => {
			// this.addRandomData();
			this.loadStatus = 'loadmore';
		}, 1000);
	},
	methods: {

	    //保存用户意向
        saveTsOrderPurpose:function () {
            this.errorMessage='';
            this.errorNameMessage='';
            let  userNameFlg= this.$u.test.isEmpty(this.userName);
            if(null == this.userName || '' == this.userName || undefined ==this.userName){
                this.errorNameMessage='用户名不能空';
                return false
            }
           let flg =  this.$u.test.mobile(this.userPhone);
           if(!flg){
               this.errorMessage='手机号不正确';
			   return false
		   }

            this.$u.api.saveTsOrderPurpose({
                'custName':this.userName,
                'custPhone': this.userPhone,
                'productId':this.productId
            }).then(res=>{
                this.popupShow=false;
                this.$refs.uToast.show({
                    title: '已经收到您的提交',
                    type: 'success'
                });

            })
        },
        searchProduct:function (value) {
                this.$refs.uWaterfall.clear();
            this.productList=[];
			this.pageInfo.pageNum=1;
			this.queryTsProductForPage();


        },
		moneyHandle(item) {
			let money = 0.0;
			let unit = '元/-';
			if (item && item.productSalsePrice) {
				money = Number(item.productSalsePrice / 100).toFixed(2);
			}

			if (item && item.productUnit) {
				unit = '元/' + item.productUnit;
			}
			item.productSalsePrice = money + unit;
		},
		//分页查询产品
		queryTsProductForPage(){
			this.$u.api.queryTsProductOnlyBaseParamForPage({
				'pageReq':this.pageInfo,
				'categoryId': this.categoryId,
				'productName':this.keyword,
				'productStatus':1
			}).then(res=>{
				if(res.pages >= this.pageInfo.pageNum){
					this.loadStatus = 'nomore';
				}else{
					this.loadStatus = 'loadmore';
				}
				this.pageInfo.pageNum++;
				res.rows.forEach(item=>{
					this.moneyHandle(item);
					this.productList.push(item);
				})
			})
		},
		//获取产品列表
		selectTsProductForList() {
			this.$u.api
				.selectTsProductForList({
					'categoryId': this.categoryId
				})
				.then(res => {
					console.log(res);
					// this.productList = res
					res.forEach(item => {
						this.moneyHandle(item);
						this.productList.push(item);
					});
					this.loadStatus = 'nomore';
				});
		},
		/**.提交购买意向*/
		submitBuyIdea: function(productId) {
		    this.productId=productId;
            this.popupShow=true
			// this.$refs.uToast.show({
			// 	title: '已经收到您的提交',
			// 	type: 'success'
			// });
		},
		/**产品明细*/
		goProductDetail: function(item) {
			console.log("获取到的产品 item=");
			console.log(item);
			uni.navigateTo({ url: '/pages/shops/productdetail/index?id='+item.id });
		},
		addRandomData() {
			for (let i = 0; i < 10; i++) {
				let index = this.$u.random(0, this.list.length - 1);
				// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
				let item = JSON.parse(JSON.stringify(this.list[index]));
				item.id = this.$u.guid();
				this.flowList.push(item);
			}
		},
		remove(id) {
			this.$refs.uWaterfall.remove(id);
		},
		clear() {
			this.$refs.uWaterfall.clear();
		},
	},

	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	}
};
</script>

<style>
/* page不能写带scope的style标签中，否则无效 */
page {
	background-color: rgb(240, 240, 240);
}
</style>

<style lang="scss" scoped>
.demo-warter {
	border-radius: 8px;
	margin: 5px;
	background-color: #ffffff;
	padding: 8px;
	position: relative;
}

.u-close {
	position: absolute;
	top: 32rpx;
	right: 32rpx;
}

.demo-img-wrap {
}

.demo-image {
	width: 100%;
	border-radius: 4px;
}

.demo-title {
	font-size: 30rpx;
	margin-top: 5px;
	color: $u-main-color;
	word-break: break-all;
}

.demo-tag {
	display: flex;
	margin-top: 5px;
}

.demo-tag-owner {
	background-color: $u-type-error;
	color: #ffffff;
	display: flex;
	align-items: center;
	padding: 4rpx 14rpx;
	border-radius: 50rpx;
	font-size: 20rpx;
	line-height: 1;
}

.demo-tag-thrid {
	background-color: $u-type-success-dark;
	color: #ffffff;
	display: flex;
	align-items: center;
	padding: 4rpx 14rpx;
	border-radius: 50rpx;
	font-size: 20rpx;
	line-height: 1;
}

.demo-tag-text {
	border: 1px solid $u-type-primary;
	color: $u-type-primary;
	margin-left: 10px;
	border-radius: 50rpx;
	line-height: 1;
	padding: 4rpx 14rpx;
	display: flex;
	align-items: center;
	border-radius: 50rpx;
	font-size: 20rpx;
}

.demo-price {
	font-size: 30rpx;
	color: $u-type-error;
	margin-top: 5px;
}

.demo-shop {
	font-size: 22rpx;
	color: $u-tips-color;
	margin-top: 5px;
}
</style>
